<template>
  <view class="template-product tn-safe-area-inset-bottom">
   
    
    <view class="tn-margin-top  relative-top" v-if="detail">
     <image :src="detail.avatar.url" mode="widthFix" style="width: 100%;"></image>
     <text class="absolute-title">{{detail.title}}</text>
	</view>
	<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding website-shadow">
		 <view class="tn-margin-xs" >
			<view>有效期至<uni-dateformat :date="detail.valid_date"></uni-dateformat></view>
		</view>
		<view class="tn-margin-xs tn-color-grey" @click="tn('/pages/guide/guide?id='+detail._id)">
			<text>公开课 ></text>
		</view>
	</view>
    <view class="tn-padding-bottom-xl">
      <view class="">
        <view class="tn-margin" >
          <view :class="['tn-flex tn-flex-row-between tn-flex-col-center tn-padding website-shadow',index > 0 && !invited ? 'lock':'']" @click="tn('/pages/study/study?id='+item._id)"  v-for="(item,index) in chapters">
            <view class="justify-content-item">
              <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                <view>
					  <image :src="`https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/${index > 0 && !invited ? 'lock':'play'}.png`" mode="widthFix" style="width: 80rpx;height: 80rpx"></image>
                </view>
                <view class="tn-padding-right tn-color-black">
                  <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
                    {{item.title}}
                  </view>
                </view>
              </view>
            </view>
            <view class="justify-content-item tn-flex-row-center">
              {{item.moreContent ? (item.moreContent.length || 3)+'  question' : 'no question' }}
            </view>
          </view>
        </view>
      </view>
    </view>  
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  const pageDataCenter=uniCloud.importObject('page-data-center')
  export default {
    name: 'TemplateProduct',
    mixins: [template_page_mixin],
    data(){
      return {
        cardCur: 0,
		chapters:[],
        banner: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
        current: 0,
		detail:null,
		catchCourse:null
      }
    },
	onLoad(option) {
		this.getData(option.id)
	},
	computed:{
		invited(){
			return this.catchCourse ? this.catchCourse.invite : false
		}
	},
    methods: {
		getData(course_id){
			pageDataCenter.getCourseDetail(course_id).then((res)=>{
				console.log('getCourseDetail',res)
				this.detail=res.data
			})
			pageDataCenter.getCourseChapter(course_id).then((res)=>{
				console.log('getCourseChapter',res)
				this.chapters=res.data
			})
			pageDataCenter.getCourseCatch(course_id).then((res)=>{
				if(res.code==1){
					this.catchCourse=res.data
				}
			})
		},
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // 跳转
      tn(e) {
		  if(this.invited){
			  uni.navigateTo({
			  	url: e,
			  });
		  }else{
			  uni.showToast({
			  	icon:'none',
				title:'请联系管理员开通'
			  })
		  }
      },
      // tab选项卡切换
      tabChange(index) {
        this.current = index
      },
      getRandomCoolBg() {
        return this.$t.colorUtils.getRandomCoolBgClass()
      },
	  goBack(){
		  uni.navigateBack()
	  }
    }
  }
</script>

<style lang="scss" scoped>
	@import '../course/course.scss';
	.absolute-title{
		position: absolute;
		width: 100%;
		height: 40px;
		top: 20%;
		left: 0;
		text-align: center;
		background-color: rgba(120,120,120, .3);
		color: #fff;
		font-size: 28px;
		font-weight: bold;
		padding: 10px;
	}
	.lock{
		filter: grayscale(100%);
	}
</style>
